<template>
	<div class="processBar" >
		<span>{{formatTime(Time)}}</span>
		<span class="progress" ref='progress' @click='progressClick'>
			<span class="progress_active" ref='progress_active'></span>
			<i class="point" ref='point' @touchstart='drag' @touchend='dragUp'></i>
		</span>
		<span class="total_time">{{formatTime(currentSong.duration)}}</span>
	</div>
</template>

<script>
	import { mapGetters,mapMutations } from 'vuex'

	export default {
		props:{
			Time:{
				type:Number,
				default:0
			}
		},
		//所有改变进度条的操作都将改动后的进度条宽度保存在pointWidth中，并用watch监听变化，随时传给父级
		data(){
			return{
				pointWidth:0,
				canMove:false
			}
		},
		computed:{
			...mapGetters(['currentSong'])
		},
		methods:{
			//将以秒为单位的时间设置成00:00格式 
			formatTime(times){
				let second = Math.floor(times);
				let minute = Math.floor(second/60) ;
				if (minute<=9) {
					minute = '0'+minute
				}
				second = second%60
				if (second<=9) {
					second = '0'+second
				}
				return minute+":"+second
			},
			//点击进度条的某位置，跳转到该位置
			progressClick(e){
				this.pointWidth = e.offsetX
			},
			//拖动进度条
			drag(){
				this.canMove = true;
				this.$refs.progress.addEventListener("touchmove",(e)=>{
					// console.log(this.canMove)
					if(!this.canMove){
						return;
					}
					let x = e.touches[0].clientX - this.$refs.progress.offsetLeft
					this.pointWidth = x;
				})
			},
			dragUp(){

			}
		},
		watch:{
			//设置进度条的宽度
			Time(newTime){
				let width = newTime/this.currentSong.duration * 100;
				this.$refs.progress_active.style.width = width + '%';
				this.$refs.point.style.left = this.$refs.progress_active.clientWidth + 'px'
			},
		//所有改变进度条宽度的操作都在这里监听，用改变后的进度条宽度，总歌曲时长，进度条的总宽度得出改变后的歌曲的时长，再将此值传给父组件，作为父组件audio标签的currentTime属性的值，从而改变歌曲的播放进度
			pointWidth(newPointWidth){
				if (newPointWidth >= this.$refs.progress.clientWidth) {
					newPointWidth=this.$refs.progress.clientWidth
					this.canMove = false;
					return;
				}

				let changeTime = (newPointWidth*this.currentSong.duration)/this.$refs.progress.clientWidth;
				this.$emit('changeTimeClick',changeTime)
			}
		}
	}
</script>

<style scoped lang="less">
	@import "~assets/less/variable";
 	@import "~assets/less/mixin";
	
	.processBar{
		display: flex;
		justify-content:space-between;
		align-items:center;
		font-size: @font-size-small-s;
		padding:5px 15px;
		.progress{
			display: inline-block;
			width: 75%;
			height: 1.2px;
			background-color:@color-text-ll;
			position: relative;
			.progress_active{
				position: absolute;
				display: inline-block;
				left: 0;
				top:0;
				height: 1.2px;
				background-color: @color-theme;
			}
			.point{
				display: inline-block;
				position: absolute;
				margin-left: -7px;
				top:-7px;
				width: 15px;
				height: 15px;
				border-radius: 50%;
				background-color: @color-theme;
			}
		}
		.total_time{
			float:right;
		}
	}
</style>